<ng-container *ngIf="ns.currentNetwork | async">

  <form [formGroup]="searchForm" (ngSubmit)="submitSearch()">
    <mat-form-field class="search" appearance="outline">
      <mat-label>Search for account or block</mat-label>
      <input matInput formControlName="search" placeholder="Account address or block number">
      <button mat-icon-button matSuffix type="submit" [attr.aria-label]="'Search'">
        <mat-icon>search</mat-icon>
      </button>
      <mat-error *ngIf="searchForm.controls['search'].hasError('wrongNetwork')">
        This address does not belong to the {{ns.currentNetwork | async}} network. Do you need to switch to another network?
      </mat-error>
      <mat-error *ngIf="searchForm.controls['search'].hasError('wrongFormat')">
        Please enter a valid account address or block number.
      </mat-error>
    </mat-form-field>
  </form>

  <ng-container *ngIf="(blocks | async)?.length === 0">
    <p>Waiting for blocks...</p>
    <mat-progress-bar mode="buffer"></mat-progress-bar>
  </ng-container>

  <div class="last-block" *ngIf="((latestBlockNumber | async) || 0) > 0">
    {{latestBlockNumber | async}}
  </div>

  <div class="blocks" [@blocksAnimation]="(latestBlockNumber | async)">
    <div class="block-outer" *ngFor="let block$ of (blocks | async)">
      <ng-container *ngIf="block$ | async as block">
        <a class="block-inner" [class.finalized]="block.finalized" [routerLink]="'block/' + block.number" [@blockContentAnimation]="block.extrinsics.length">
          <span class="number">
            {{block.number.toString().slice(0, -2)}}<strong>{{block.number.toString().slice(-2)}}</strong>
          </span>
          <span class="transaction" *ngFor="let i of block.extrinsics"></span>
          <span class="event" *ngFor="let i of block.events"></span>
        </a>
      </ng-container>
    </div>
  </div>

</ng-container>

<p *ngIf="(ns.currentNetwork | async) === '' &&
          ((pa.substrateRpcRegistered | async) && (pa.substrateRpcConnected | async) === false || (pa.substrateRpcRegistered | async) === false)">
  Initializing...
</p>

<p *ngIf="(pa.substrateRpcRegistered | async) === false && (pa.explorerRegistered | async) === false" style="color: red">Connection error! Please try again later or try a different endpoint.</p>
